<script setup>
import { getWastageAssetsOfMachine } from '@/api/visual/wastageAssetsPannel'

const startValue = ref(0)
const endValue = ref(12)
const xAxisData = ref([])
const yAxisData = ref([])
const timer = ref(null)
const psChartRef = ref()
const option = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },

  xAxis: {
    type: 'category',
    data: xAxisData.value,
    min: 0,
    axisLabel: {
      color: '#ccc1c1'
    }
  },

  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#2b2c33'
      }
    },
    axisLabel: {
      color: '#ccc1c1'
    }
  },
  grid: {
    top: '15%',
    left: '5%',
    right: '5%',
    bottom: '10%'
  },
  dataZoom: [
    //滑动条
    {
      xAxisIndex: 0, //这里是从X轴的0刻度开始
      show: false, //是否显示滑动条，不影响使用
      type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      startValue: startValue.value, // 从头开始。
      endValue: endValue.value // 一次性展示几个。
    }
  ],

  series: [
    {
      data: yAxisData.value,
      type: 'bar',
      emphasis: { focus: 'series' },
      barMaxWidth: 60, // 最大宽度
      itemStyle: {
        color: '#409eff'
      },
      name: 'line',
      label: {
        show: true,
        distance: 10,
        position: 'top',
        color: '#fff'
      }
    }
  ]
}))
watch(
  () => option.value,
  () => {
    nextTick(() => {
      console.log(111)

      psChartRef.value && psChartRef.value.updateChartOption(option.value)
    })
  },
  {
    deep: true
  }
)
const loadData = async () => {
  const { data } = await getWastageAssetsOfMachine({ name1: 1 })
  xAxisData.value = data.map(item => `${item.UID}-${item.UName}`)
  yAxisData.value = data.map(item => item.wastageAssets)
  if (timer.value == null) {
    timer.value = setInterval(() => {
      if (endValue.value === xAxisData.value.length) {
        startValue.value = 0
        endValue.value = 12
      } else {
        startValue.value += 1
        endValue.value += 1
      }
    }, 2000)
  }
}

onMounted(loadData)
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box11 title="本月设备能源损耗对比">
      <ps-chart2 :option="option" :autoSet="false" ref="psChartRef"></ps-chart2>
    </dv-border-box11>
  </div>
</template>

<style scoped lang="scss"></style>
